<!-- 
  1. less自动化导入
  
     场景：简化我们在组件style中使用less变量 
     不这么做：先导入然后再使用
     这样做了：不需要手动导入了 直接使用less文件中的变量即可

     如何做：style-resources-loader （vue-cli）
            vue.config.js  对应配置的位置  path.join(__dirname, './src/styles/var.less')

  2. 吸顶交互实现

     场景：电商页首页比较长 滑动浏览的过程中 随时跳转到其它页面
     如何做：
       1.核心思路
        监听window的scroll事件  在事件回调函数中 拿到当前距离顶部的像素值
        如果像素值大于某个临界点 就让导航粘性定位 否则就不出现

       2.核心技术点
        1. vueUse  useWindowScroll  提供了一个可以随着滚动发生而产出一个响应式的数据
           这个数据就是距离顶部的像素值

        2. :class="{show: y > 78}"

  3. vuex优化数据获取
     
     场景：同一个数据居然请求了三次 显然存在重复 多组件共享数据 -> vuex做优化

     如何做：
      1.使用vuex完全管理分类数据 state -> mutation  -> actions -> getters
      2.相关组件只需要从vuex中导入数据直接使用

     如何在setup中使用state/getters?
      1. 导入一个方法 useStore  
         import {useStore} from 'vuex'

      2. 在setup中执行这个方法 得到一个store实例对象（this.$store）
         const store = useStore()

         用数据  state/getters  
                 store.state.模块名.属性名
                 store.getters['模块名/getter名']
                 统一用计算属性做映射 让当前组件中的数据和vuex中的数据始终保持同步一致关系

         调方法  mutation/action
                 store.commit('模块名/mutation')
                 store.dispatch('模块名/action')

         
 -->